<!-- 日志 -->
<style scoped>
  .log{
    height: 200px;
    border: 1px solid #dcdee2;
  }
  .split-pane{
    padding: 5px;
  }
</style>

<template>
  <div class="log" :style="{height: mainHeight + 'px'}">
    <Split v-model="split1">
      <div slot="left" class="split-pane">
        <Card style="width: 100%" :style="{height: mainHeight-10+'px'}">
          <div slot="title" style="height: 24px; line-height: 24px;">
            <Icon type="ios-film-outline"></Icon>
            我的日志
          </div>
          <Table border size="small" :columns="logColumns" :data="logData"></Table>
        </Card>
      </div>
      <div slot="right" class="split-pane" style="padding-left: 10px">
        <Card style="width: 100%" :style="{height: mainHeight-10+'px'}">
          <div slot="title" style="height: 24px; line-height: 24px; text-align: center;">
            发布日志
          </div>
          <Form :model="newLog" :rules="newLogRules" :label-width="50">
            <FormItem label="内容" prop="name">
              <Input v-model="newLog.content" type="textarea" :rows="10" placeholder="今天做了什么..."></Input>
            </FormItem>
            <FormItem label="日期" prop="mail">
              <DatePicker v-model="newLog.date" type="date" placeholder="请选择" style="width: 200px"></DatePicker>
            </FormItem>
            <FormItem>
              <Button type="primary" long>提&nbsp;交</Button>
            </FormItem>
          </Form>
        </Card>
      </div>
    </Split>
  </div>
</template>

<script>
export default {
  data () {
    return {
      split1: 0.7,
      mainHeight: '600',
      logColumns: [],
      logData: [],
      newLogRules: [],
      newLog: {
        content: '',
        date: new Date()
      }
    }
  },
  mounted () {
    this.mainHeight = window.innerHeight - document.querySelector('.ivu-layout-header').offsetHeight - document.querySelector('.ivu-layout-footer').offsetHeight - 4
  }
}
</script>
